<template>
  <div>
    <div class="warnningTip">展示全部已经成功分享到抖音的记录</div>
    <QueryForm
      v-model="filters"
      :query-form-config="queryFormConfig"
      @handleQuery="handleQuery"
      @clear="clear"
    />
    <el-button type="primary" class="mb20" @click="handleAdd">{{
      translate("add")
    }}</el-button>
    <el-table
      v-loading="listLoading"
      :data="list"
      element-loading-text="Loading"
      border
      fit
      :header-row-class-name="'table-header'"
      class="doumee-element-table"
    >
      <el-table-column
        align="center"
        label="记录ID"
        min-width="80"
        prop="id"
        show-overflow-tooltip
      />
      <el-table-column
        align="center"
        label="视频文案"
        min-width="160"
        prop="videoTitle"
      >
        <template v-slot="scope">
          <el-popover
            placement="bottom"
            trigger="hover"
            width="500"
            :content="scope.row.videoTitle"
          >
            <span v-if="scope.row.videoTitle" slot="reference">{{
              scope.row.videoTitle.slice(0, 10)
            }}</span>
          </el-popover>
        </template>
      </el-table-column>
      <el-table-column align="center" label="封面" min-width="82" prop="">
        <template slot-scope="scope">
          <el-image
            v-if="scope.row.image"
            style="width: 60px"
            fit="contain"
            :src="scope.row.image"
            :preview-src-list="[scope.row.image]"
          />
          <img
            v-else
            src="@/assets/images/default_meal_img.jpg"
            style="width: 60px"
          />
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        label="归属计划"
        min-width="100"
        prop="planName"
      />
      <el-table-column
        align="center"
        :label="translate('pubTime')"
        min-width="160"
        prop="creatTime"
        show-overflow-tooltip
      />
      <el-table-column
        align="center"
        :label="translate('handle')"
        min-width="100"
        prop=""
      >
        <template v-slot="scope">
          <div class="flex-cc">
            <el-button type="text" @click="handleDetail(scope.row)">{{
              translate("ckxq")
            }}</el-button>
            <el-button type="text" class="red" @click="handleDel(scope.row)">{{
              translate("del")
            }}</el-button>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <Paginations
      :total="totalCount"
      :page="pagination.page"
      @current-change="currentPageChange"
      @SizeChange="pageSizeChange"
    />
    <Detail v-if="isShowDetail" ref="DetailRef" />
    <Share
      v-if="isOpenPub"
      ref="ShareRef"
      @close="isOpenPub = false"
      @success="getList"
    />
  </div>
</template>

<script>
import {
  DyPublishList,
  DyPublishDel,
  momVideoList,
  momSiteList,
  DyImpowerUploadVideo,
  DyImpowerUploadPhoto
} from '@/api'
import { Loading } from 'element-ui'
import Share from './share.vue'
import Detail from './ShareDetail.vue'
export default {
  components: {
    Share,
    Detail
  },
  data() {
    return {
      filters: {},
      pagination: {
        rows: 10,
        page: 1
      },
      list: [],
      totalCount: 0,
      listLoading: false,
      videoProgress: 0,
      isShowProgress: false,
      isShowDetail: false,

      isOpenPub: false,
      param: {},

      isOpenSelVideo: false,
      filtersSel: {},
      videoList: [],
      videoTotalCount: 0,
      paginationVideo: {
        rows: 10,
        page: 1
      },
      siteList: [],

      modalDialog: this.$store.state.app.dialog,
      queryFormConfig: {
        formItems: [
          {
            filed: 'title',
            type: 'input',
            label: '视频标题'
          },
          {
            filed: 'selDate',
            type: 'daterange',
            label: translate('createTime'),
            placeholder: '开始时间-结束时间'
          }
        ],
        online: true
      }

    }
  },
  created() {
    this.getList()
  },
  methods: {
    videoBefore() {
      this.videoProgress = 0
      this.isShowProgress = true
    },
    videoUploadPro(e, file, files) {
      this.videoProgress = e.percent
      // console.log('videoProgress', e)
      // console.log('e', e)
      // console.log('file', file)
      // console.log('files', files)
    },
    radioVideoChange(v) {
      const loadingInstance = Loading.service({
        target: 'dialog_modal',
        text: '正在上传至抖音服务器......'
      })
      this.isShowProgress = true
      DyImpowerUploadVideo({ param: { userId: sessionStorage.getItem('userId'), mediaPath: v } }).then(res => {
        if (res.errorCode !== '000000') return
        this.isShowProgress = false
        this.$set(this.param, 'videoPath', v)
        this.$set(this.param, 'videoId', res.record)
        this.isOpenSelVideo = false
        loadingInstance.close()
      }, () => {
        this.isShowProgress = false
        loadingInstance.close()
      })
    },
    UploadSuccess(e, str) {
      if (str === 'videoPath') {
        DyImpowerUploadVideo({ param: { userId: sessionStorage.getItem('userId'), mediaPath: e.showUrl } }).then(res => {
          if (res.errorCode !== '000000') return
          this.isShowProgress = false
          this.$set(this.param, str, e.showUrl)
          this.$set(this.param, 'videoId', res.record)
        }, () => {
          this.isShowProgress = false
        })
      } else {
        DyImpowerUploadPhoto({ param: { userId: sessionStorage.getItem('userId'), mediaPath: e.showUrl } }).then(res => {
          if (res.errorCode !== '000000') return
          this.$set(this.param, str, e.showUrl)
          this.$set(this.param, 'videoCoverId', res.record)
        })
      }
    },
    handleDetail(row) {
      this.isShowDetail = true
      this.$nextTick(() => {
        this.$refs.DetailRef.isShowModal = true
        this.$refs.DetailRef.getDetail(row.id)
      })
    },
    handleDel(row) {
      this.$confirm('是否删除该条数据？', this.translate('ts'), {
        confirmButtonText: this.translate('qd'),
        cancelButtonText: this.translate('cancel')
      }).then(() => {
        DyPublishDel({ param: { id: row.id } }).then(res => {
          if (res.errorCode !== '000000') return
          this.$message.success(this.translate('delScs'))
          this.getList()
        })
      })
    },
    deleteDeviceConfigAddImage(str) {
      this.$set(this.param, str, '')
    },
    handleAdd() {
      this.isOpenPub = true
      this.$nextTick(() => {
        this.$refs.ShareRef.isShowModal = true
      })
    },
    handleOpenSel() {
      this.isOpenSelVideo = true
      this.getSite()
      this.getListSel()
    },
    getList() {
      const { filters, pagination } = this
      this.listLoading = true
      if (filters.selDate && filters.selDate.length > 0) {
        filters.startTime = filters.selDate[0]
        filters.endTime = filters.selDate[1]
      } else {
        filters.startTime = null
        filters.endTime = null
      }
      DyPublishList({ param: filters, pagination }).then(res => {
        this.listLoading = false
        this.list = res.recordList || []
        this.totalCount = res.totalCount
      }, () => {
        this.listLoading = false
      })
    },
    getListSel(page) {
      const { filtersSel, paginationVideo } = this
      paginationVideo.page = page || paginationVideo.page
      if (filtersSel.selTime && filtersSel.selTime.length > 0) {
        filtersSel.beginTime = filtersSel.selTime[0]
        filtersSel.endTime = filtersSel.selTime[1]
      } else {
        filtersSel.beginTime = null
        filtersSel.endTime = null
      }
      momVideoList({ param: filtersSel, pagination: paginationVideo }).then(res => {
        this.videoList = res.recordList || []
        this.videoTotalCount = res.totalCount
      }, () => {
      })
    },
    getSite() {
      momSiteList({ param: {} }).then(res => {
        this.queryFormConfigSel.formItems[0].options = res.recordList || []
      })
    },
    handleQuery() {
      this.pagination.page = 1
      this.getList()
    },
    clear() {
      this.filters = {}
      this.handleQuery()
    },
    clearSel() {
      this.filtersSel = {}
      this.getListSel(1)
    },
    currentPageChange(val) {
      this.pagination.page = val
      this.getList()
    },
    pageSizeChange(val) {
      this.pagination.rows = val
      this.getList()
    },
    videoPageSizeChange(val) {
      this.paginationVideo.rows = val
      this.getListSel()
    }
  }
}
</script>

<style lang="scss" scoped>
@import "@/styles/variables.scss";
.selList {
  display: flex;
  flex-wrap: wrap;
  .item {
    width: 200px;
    margin: 20px;
  }
}
.device-uploader {
  width: 80px;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #fff;
  cursor: pointer;
  border: 1px dashed #ccc;
  border-radius: 8px;
  transition: all 0.3s;
  margin-right: 20px;
  &:hover {
    border-color: $menuActive;
    .uploader-icon {
      color: $menuActive;
    }
  }
  ::v-deep .el-upload {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    .file {
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;
      background-size: contain;
      background-position: center;
      background-repeat: no-repeat;
      border-radius: 8px;
      display: flex;
      align-items: center;
      justify-content: center;
      .delete {
        background-color: rgba(0, 0, 0, 0.5);
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        display: none;
        align-items: center;
        justify-content: center;
        .icon {
          color: #fff;
        }
      }
      &:hover {
        .delete {
          display: flex;
        }
      }
    }
  }
  .uploader-icon {
    color: #aaaaaa;
    font-size: 22px;
    transition: all 0.3s;
  }
}
.device-uploader2 {
  width: 160px;
  height: 110px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #fff;
  cursor: pointer;
  border: 1px dashed #ccc;
  border-radius: 8px;
  transition: all 0.3s;
  margin-right: 20px;
  &:hover {
    border-color: $menuActive;
    .uploader-icon {
      color: $menuActive;
    }
  }
  ::v-deep .el-upload {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    .file {
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;
      background-size: contain;
      background-position: center;
      background-repeat: no-repeat;
      border-radius: 8px;
      display: flex;
      align-items: center;
      justify-content: center;
      .delete {
        background-color: rgba(0, 0, 0, 0.5);
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        display: none;
        align-items: center;
        justify-content: center;
        .icon {
          color: #fff;
        }
      }
      &:hover {
        .delete {
          display: flex;
        }
      }
    }
  }
  .uploader-icon {
    color: #aaaaaa;
    font-size: 22px;
    transition: all 0.3s;
  }
}
</style>
